<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>慕课七夕主题</title>
    <link rel="stylesheet" href="css/style3-3.css" />
    <link rel="stylesheet" href="css/pageA3-1.css" />
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/swipe2-3.js"></script>
    <script type="text/javascript" src="http://img.mukewang.com/down/55ac9ea30001ace700000000.js"></script>
  </head>
  <body>
    <div id='content'>
      <ul class='content-wrap'>
        <li>
          <div class="a_background">
            <div class="a_background_top"></div>
            <div class="a_background_middle"></div>
            <div class="a_background_botton"></div>
          </div>
        </li>
        <li> 页面2 </li>
        <li> 页面3 </li>
      </ul>
      <div id="boy" class="charector slowWalk"></div>
      <div class="button">
        <button>点击开始走路</button>
      </div>
    </div>
    <script type="text/javascript">
      var swipe = Swipe($("#content"));
      // 获取数据
      var getValue = function(className) {
        var $elem = $('' + className + '')
        // 走路的路线坐标
        return {
          height: $elem.height(),
          top: $elem.position().top
        };
      };
      // 路的Y轴
      var pathY = function() {
        var data = getValue('.a_background_middle');
        return data.top + data.height / 2;
      }();
      var $boy = $("#boy");
      var boyHeight = $boy.height();
      // 修正小男孩的正确位置
      $boy.css({
        top: pathY - boyHeight + 25
      });
      // 绑定一个点击事件，开始走路
      $("button").click(function() {
        // left的变化
        $boy.transition({
          'left': $("#content").width() + 'px',
        }, 10000, 'linear', function() {});
      });
    </script>
  </body>

</html>